expo-font

What is expo-font?

The expo-font package is a part of the Expo ecosystem and provides utilities for loading and using custom fonts in React Native applications. It simplifies the process of integrating custom fonts, ensuring they are loaded before the app renders.

What are expo-font's main functionalities?

Loading Custom Fonts

This feature allows you to load custom fonts asynchronously before the app renders. The AppLoading component is used to display a loading screen until the fonts are fully loaded.

import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import React, { useState } from 'react';
import { Text, View } from 'react-native';

const loadFonts = () => {
  return Font.loadAsync({
    'custom-font': require('./assets/fonts/CustomFont.ttf'),
  });
};

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if (!fontsLoaded) {
    return (
      <AppLoading
        startAsync={loadFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={console.warn}
      />
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'custom-font', fontSize: 20 }}>Hello, world!</Text>
    </View>
  );
}

Using Loaded Fonts

Once the fonts are loaded, you can use them in your components by specifying the fontFamily style property.

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'custom-font', fontSize: 20 }}>Hello, world!</Text>
    </View>
  );
}

Other packages similar to expo-font

react-native-fonts

react-native-fonts is a package that provides similar functionality for loading and using custom fonts in React Native applications. It offers a straightforward API for font management but lacks the tight integration with the Expo ecosystem that expo-font provides.

react-native-custom-fonts

react-native-custom-fonts is another package for managing custom fonts in React Native. It offers a more manual approach compared to expo-font, requiring additional setup steps and configuration.

README

expo-font

Load fonts at runtime and use them in React Native components.

API documentation

• Documentation for the master branch
• Documentation for the latest stable release

Installation in managed Expo projects

For managed managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the react-native-unimodules package before continuing.

Add the package to your npm dependencies

npm install expo-font

Configure for JavaScript

We're planning on handling this automatically in the future, but for now you'll need to set Font.processFontFamily as a preprocessor for StyleSheet. Add the following code to the top of your App.js:

import * as Font from 'expo-font';
import { StyleSheet } from 'react-native';
StyleSheet.setStyleAttributePreprocessor('fontFamily', Font.processFontFamily);

Configure for iOS

Run pod install in the ios directory after installing the npm package.

Configure for Android

No additional set up necessary.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.

Changelog

47.0.0 — 2022-10-28

For changelog entries prior to SDK 47, refer to: https://github.com/expo/expo/blob/ff35557463c0db1cf8683939d752c59baf127f21/CHANGELOG.md#L323